<template>
  <div class="report-road-conditions">
    <el-dialog :title="dialogTitle" v-model="roadConditionVisible" width="30%">
      <hr style="margin-bottom: 10px" color="#f0f0f0" />
      <div class="dialog-content">
        <div class="content-item">
          <span
            ><h3>事件类型<span style="color: red">*</span></h3></span
          >
          <el-select v-model="value" placeholder="Select" style="width: 240px">
            <el-option
              v-for="item in event_types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="content-item">
          <span
            ><h3>事件地址<span style="color: red">*</span></h3></span
          >
          <el-input
            v-model="event_address"
            style="width: 360px"
            placeholder="Please input"
          />
        </div>
        <div class="content-item">
          <span><h3>建筑标识</h3></span>
          <el-input
            v-model="building_mark"
            style="width: 360px"
            placeholder="Please input"
          />
        </div>
        <div class="content-item">
          <span><h3>事件坐标</h3></span>
          <el-input
            v-model="roadConditionLocation"
            style="width: 360px"
            placeholder="Please input"
          />
        </div>
        <div class="content-item">
          <span
            ><h3>发生时间<span style="color: red">*</span></h3></span
          >
          <el-date-picker
            v-model="event_time"
            type="datetime"
            :popper-class="popperClass"
            placeholder="Select date and time"
          />
        </div>
        <div class="content-item">
          <span><h3>事件概述</h3></span>
          <el-input
            v-model="event_summary"
            style="width: 360px"
            placeholder="请输入事故的具体信息"
          />
        </div>
        <div
          class="button-group"
          style="display: flex; gap: 20px; justify-content: flex-end"
        >
          <el-button type="primary" @click="handleSubmit">确定</el-button>
          <el-button type="default" @click="roadConditionVisible = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoadConditoinStore } from '@/stores/counter.js'
import { storeToRefs } from 'pinia'
import { getLocation } from '@/request/getLocation.js'
import { axios } from '@/main.js'

import { useLoginStore } from '../../stores/counter.js'
const $store = useLoginStore()
const username = ref('')
onMounted(() => {
  username.value = $store.currentUser.username
})

// const { setReportRoadConditions } = useRoadConditoinStore();
const { roadConditionVisible, roadConditionLocation } = storeToRefs(
  useRoadConditoinStore()
)

// const dialogVisible = ref(true);
const dialogTitle = ref('报告路况')
const value = ref('')
const event_types = [
  {
    value: '碰撞',
    label: '碰撞',
  },
  {
    value: '刮擦',
    label: '刮擦',
  },
  {
    value: '碾压',
    label: '碾压',
  },
  {
    value: '追尾',
    label: '追尾',
  },
  {
    value: '翻车',
    label: '翻车',
  },
  {
    value: '失火',
    label: '失火',
  },
  {
    value: '其他',
    label: '其他',
  },
]
const event_time = ref('')
const popperClass = ref('popper-class')
const event_address = ref('')
const building_mark = ref('')
const event_summary = ref('')
const handleSubmit = () => {
  confirm('确认提交?')
  // alert('确认提交?')
  axios.post('/api/events', {
    reporter: username.value,
    eventType: value.value,
    eventLevel: null,
    eventLocation: event_address.value,
    location: roadConditionLocation.value.toString(),
    eventDescription: event_summary.value,
    reportTime: event_time.value
      .toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false,
      })
      .replace('T', ' ').replaceAll('/', '-')
      .substr(0, 19),
  })

  roadConditionVisible.value = false
}
watch(roadConditionVisible, (newVal) => {
  if (newVal) {
    getLocation(roadConditionLocation.value).then((res) => {
      console.log(res)
      event_address.value = res.regeocode.formatted_address
    })
  }
})
// onMounted(()=>{
//   if (roadConditionLocation.value) {
//     console.log(roadConditionLocation.value)
//     getLocation(roadConditionLocation.value).then((res) => {
//       console.log(res)
//     })
//   }

// })
</script>

<style scoped>
.content-item {
  display: flex;
  gap: 50px;
}
.popper-class {
  position: absolute;
  top: 100px;
  left: 200px;
  z-index: 1000;
}
</style>
